<template>
<!-- 事务选项 组件 -->
  <section class="eventType" style="display:flex;">
      <h2 :class="{chooseActive:currentEventDataType==='All'}" @click="toggleType('All')">All</h2>
      <h2 :class="{chooseActive:currentEventDataType==='Unfinished'}" @click="toggleType('Unfinished')">Unfinished</h2>
      <h2 :class="{chooseActive:currentEventDataType==='Done'}" @click="toggleType('Done')">Done</h2>
  </section>
</template>

<script setup>
  import {ref,getCurrentInstance,computed,watch} from 'vue'
  import JSS from '@/utils/JSONTool.js'

  let {proxy} = getCurrentInstance()
  let chooseActive = ref(true)
  let props = defineProps({
    currentEventDataType:{
      type:String
    }
  })
  let emit = defineEmits(['toggleEventType'])

  function toggleType(_type){
    emit('toggleEventType',_type)
  }

  // 观察变化
  // watch(
  //   ()=>props.currentEventDataType,
  //   (newVal)=>{
  //     // console.log(JSS(newVal));
  //     // console.log(props)
  //   }
  // )

</script>

<style scoped>
  h2{
    padding: 0 0.15rem;
    cursor: pointer;
  }
  h2:hover{
    text-shadow: 1px 1px 5px rgba(0, 0, 0, .25);
  }
  .chooseActive{
    color: tomato;
  }
</style>
